<template>
  <div class="container">
    <el-card shadow="hover">
      <template #header>
         <HeadDemo/>
      </template>
      <template #default>
        <div class="body" >
        <input type="text" placeholder="请输入城市" v-model="city" />

        </div>

        <div v-if="city" class="citylist">
               <div v-if="status==0" class="notfoundcity">
             <ul>
                <li>似乎没有找到你要查找的城市!</li>
             </ul>
          </div>
         <div v-if="status==1" class="notfoundcity">
             <ul>
                <li @click="handleView(formatted_address,adcode)">{{ formatted_address}}</li>
             </ul>
          </div>
          </div>
       

        <!-- 提示显示文字和保存区域 -->
         <div v-if="addcitys.length==0" class="tripword">
            <p>暂时没有保存过城市天气信息,请查询后点击右上角'+'号保存。</p>
         </div>
         <div v-else="addcitys.length>=1" class="addcitylist">
              <ul>
                  <li v-for="(addcity,index) in addcitys">
                  <span>{{addcity.city}}</span> <span>{{ addcity.templ }}度</span>
                  <div class="operate">
                       <span @click="handleView(addcity.city,addcity.itemadcode)">查看</span>
                       <span @click="handleDelete(index)">删除</span>
                  </div>
                </li>
              </ul>
         </div>
        
      </template>
     
    </el-card>
     
  </div>

</template>

<script setup>
import axios from 'axios'
import { ref,onMounted,watch } from 'vue'
import HeadDemo from '../components/HeadDemo.vue'
import { useRouter } from 'vue-router'
import { useCounterStore} from '../stores/counter'
import {storeToRefs} from 'pinia'
const {addcitys} = storeToRefs(useCounterStore());
const {handleDelete} =useCounterStore();

console.log(addcitys)

 


const router = useRouter()

const handleView = (address,adcode) => {
  // 跳转到天气界面
    router.push(`/weather${address}+${adcode}`)

}


const city = ref('')


const status = ref('')
const formatted_address= ref('')
const adcode = ref('')




  const getdata = async() => {
   const res = await axios.get(`https://restapi.amap.com/v3/geocode/geo?address=${city.value}&key=ec953eff8c0a3b2a2955578624b0e28f`)
   console.log(res.data)
    status.value = res.data.status
    formatted_address.value = res.data.geocodes[0].formatted_address
    adcode.value = res.data.geocodes[0].adcode
    console.log(adcode.value)

}

watch(city, () => {
   city.value=city.value.trim()
   console.log(city.value)
   getdata()
})

  
</script>

<style lang="scss" scoped>
@import 'reset-css';
.container {
    width: 100%;
    height: 900px;
  font-size: 40px;

  .el-card {
    background-color:rgb(1, 102, 138);
    height: 100%;
    
    
    
       .body {
          display: flex;
          justify-content: center;
        input {
           
            color:white;
            outline: none;
            background-color:rgb(1, 102, 138); 
            font-size: 25px;
             border: 0px;
             border-bottom: 1px solid white;
            width: 60%;
            height: 60px;
        }
       
       }
        .tripword{
            text-align: center;
            p{
                margin-top: 60px;
                font-size: 25px;
                color: white;
            }
        }
    
  }
 
  .notfoundcity{
      ul{
        margin: 0 auto;
        width: 60%;
        margin-top: 10px;
        list-style: none;
       
        li{
            border-radius: 10px;
            height: 60px;
            line-height: 60px;
            background-color:rgb(6, 66, 94);
            color: white;
            font-size: 25px;
        }
      }

  }
  .addcitylist{
    ul{
      width: 70%;
       margin: 0 auto;
       
       li:hover{
         .operate{
          display: block;
          position: relative;
          left: 100px;
        
         }
       }
      
      
      li{
       
        display: flex;
        justify-content: space-between;
        padding: 0px 20px  0px 20px;
        margin-top: 30px;
        color:white;
        line-height: 50px;
        height: 50px;
        background-color: rgb(0,78,113);
        min-width: 700px;
        font-size: 25px;
         

       .operate{
            
             display: none;
            
             min-width: 300px;
           
            span:nth-child(1){
              display: inline-block;
                height: 100%;
                text-align: center;
                width: 100px;
                color: white;
                cursor: pointer;
                background-color: rgb(77, 134, 198);

            }
            span:nth-child(2){
                 display: inline-block;
                margin-left: 10px;
                text-align: center;
                 height: 100%;
                width: 100px;
                color: white;
                cursor: pointer;
                background-color:rgb(77, 134, 198);

            }
        }
      }

     
    }
  }
}
</style>
